<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>驾驶证采集统计</title>
  <link rel="stylesheet" type="text/css" href="${ctx}/easyui/themes/default/easyui.css">
  <link rel="stylesheet" type="text/css" href="${ctx}/easyui/easyui_my.css">
  <link rel="stylesheet" type="text/css" href="${ctx}/easyui/themes/icon.css">
  <link rel="stylesheet" type="text/css" href="${ctx}/css/css.css" />

  <script type="text/javascript" src="${ctx}/js/jquery-1.7.min.js"></script>
  <script type="text/javascript" src="${ctx}/easyui/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="${ctx }/easyui/locale/easyui-lang-zh_CN.js"></script>
  <script type="text/javascript" src="${ctx}/js/common.js"></script>
  <script type="text/javascript" src="${ctx}/js/highcharts/highcharts.js"></script>
  <script type="text/javascript" src="${ctx}/js/highcharts/modules/exporting.js"></script>
  <script type="text/javascript">
//设置指定日期
  Date.prototype.format = function(fmt){
  	var o = {"M+": this.getMonth()+1,        //月份
  	"d+": this.getDate(),                    //日
  	"h+": this.getHours(),                   //小时
  	"m+": this.getMinutes(),                 //分
  	"s+": this.getSeconds(),                 //秒
  	"q+": Math.floor((this.getMonth()+3)/3), //季度
  	"S" : this.getMilliseconds()             //毫秒
  	};
  	if(/(y+)/.test(fmt))
  	fmt=fmt.replace(RegExp.$1,(this.getFullYear()+"").substr(4 - RegExp.$1.length));
  	for(var k in o)
  		if(new RegExp("("+ k +")").test(fmt))
  	fmt= fmt.replace(RegExp.$1, (RegExp.$1.length==1)?(o[k]):(("00"+ o[k]).substr((""+o[k]).length)));
  	return fmt;
  };
  //获取日期getData(0)今天,getData(7)七天前
  function getDatex(day){
  	var zdate=new Date();
  	var sdate=zdate.getTime();
  	var edate=new Date(sdate-(day*24*60*60*1000)).format("yyyy-MM-dd");
  	return edate;
  }
  function getDatex1(day){
  	var zdate=new Date();
  	var sdate=zdate.getTime();
  	var edate=new Date(sdate-(day*24*60*60*1000)).format("yyyy-MM-dd");
  	return edate;
  }
    var exportData="";
    $(function(){
      Highcharts.setOptions({
        lang: {
          printChart:"打印图表",
          downloadJPEG: "下载JPEG 图片" ,
          downloadPDF: "下载PDF文档"  ,
          downloadPNG: "下载PNG 图片"  ,
          downloadSVG: "下载SVG 矢量图" ,
          exportButtonTitle: "导出图片"
        }
      });
      //设置日期初始值
   	$("#startTime").datetimebox("setValue",getDatex(7));
   	$("#endTime").datetimebox("setValue",getDatex1(-1));
    });
   
    $(function(){
    	initTable();
    	//createAllContent();//表格
    });
function initTable(){
	var startTimeStr= $("#startTime").combobox('getValue');
	var endTimeStr= $("#endTime").combobox('getValue');
	
	$.ajax({
        url: "${ctx}/cxtj/findjszcjtj.htm",
        type: 'post',
        data: {startTime:startTimeStr,
        	endTime:endTimeStr},
        dataType: "json",
        success:function(data){
        	exportData=data;
            highcharts(data);//柱状图
            createAllContent1(data);//表格
        }
	 });
	
}
function createAllContent1(data){
	$("#TableData").empty();//清空原始数据
	var tableBodyStr = "";
	if(data==""){
		tableBodyStr+="";
	}else{
			tableBodyStr+="<tr>";
			tableBodyStr+="<td height=\"26\" align=\"center\" class=\"dashujutable1_top\">经办人</td>";
			tableBodyStr+="<td align=\"center\" class=\"dashujutable1_top\">总量</td>";
			tableBodyStr+="<td align=\"center\" class=\"dashujutable1_top\">待采集量</td>";
			tableBodyStr+="<td align=\"center\" class=\"dashujutable1_top\">采集待审核量</td>";
			tableBodyStr+="<td align=\"center\" class=\"dashujutable1_top\">采集已审核</td>";
			tableBodyStr+="<td align=\"center\" class=\"dashujutable1_top\">重新采集量</td>";
			tableBodyStr+="<td align=\"center\" class=\"dashujutable1_top\">采集成功率（%）</td></tr>";
		$.each(data,function(i,n){
			tableBodyStr+="<tr>";
			if(i%2==0){
				tableBodyStr+="<td height=\"28\" class=\"dashujutable1_nr1\"  align=\"center\">"+n.cjr+"</td>";
				tableBodyStr+="<td class=\"dashujutable1_nr1\" align=\"center\">"+n.total+"</td>";
				tableBodyStr+="<td class=\"dashujutable1_nr1\" align=\"center\">"+n.cjdcjTotal+"</td>";
				tableBodyStr+="<td class=\"dashujutable1_nr1\" align=\"center\">"+n.cjdshTotal+"</td>";
				tableBodyStr+="<td class=\"dashujutable1_nr1\" align=\"center\">"+n.cjyshTotal+"</td>";
				tableBodyStr+="<td class=\"dashujutable1_nr1\" align=\"center\">"+n.cxcjTotal+"</td>";
				tableBodyStr+="<td class=\"dashujutable1_nr1\" align=\"center\">"+n.percent+"</td>";
			}else{
				tableBodyStr+="<td height=\"28\" class=\"dashujutable1_nr2\"  align=\"center\">"+n.cjr+"</td>";
				tableBodyStr+="<td class=\"dashujutable1_nr2\" align=\"center\">"+n.total+"</td>";
				tableBodyStr+="<td class=\"dashujutable1_nr2\" align=\"center\">"+n.cjdcjTotal+"</td>";
				tableBodyStr+="<td class=\"dashujutable1_nr2\" align=\"center\">"+n.cjdshTotal+"</td>";
				tableBodyStr+="<td class=\"dashujutable1_nr2\" align=\"center\">"+n.cjyshTotal+"</td>";
				tableBodyStr+="<td class=\"dashujutable1_nr2\" align=\"center\">"+n.cxcjTotal+"</td>";
				tableBodyStr+="<td class=\"dashujutable1_nr2\" align=\"center\">"+n.percent+"</td>";
			}
			tableBodyStr+="</tr>";
	});
		
					
	}	
	$("#TableData").html(tableBodyStr);
}    
   
    //采集统计柱状图
    function highcharts(data) {
      var timeStr = $("#startTime").combobox('getValue') + " 至 " + $("#endTime").combobox('getValue');
      var categories = [];
      var seriesData = [];
      var seriesData1 = [];
      var seriesData2 = [];
      for(var i=0;i<data.length;i++){
        seriesData1[i] = data[i].percent;
        seriesData2[i] = data[i].percentall;
        categories[i] = data[i].cjr;
      }
      seriesData=[{name: '采集成功率', data: seriesData1}
        ,{name: '全省采集成功率占比', data: seriesData2}];

      $('#container').highcharts({
        chart: {
          type: 'column'
        },
        exporting: {
        	enabled:false, //去除右上角下载按钮
          filename: '',
          sourceWidth: 1000,
          sourceHeight: 550,
          url: 'http://localhost:<%=request.getLocalPort()%>/HeighChartsExportServlet'
        },
        title: {
          text: '驾驶证档案统计'
        },
        subtitle: {
          text: timeStr,
          x: -20
        },
        credits: {
          enabled: false
        },
        xAxis: {
          categories: categories,
          labels: {
            rotation: -45
          }
        },
        yAxis: {
          min: 0,
          title: {
            text: '采集率%'
          }
        },
        tooltip: {
          headerFormat: '<span style="font-size:12px">{point.key}</span><table>',
          pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
          '<td style="padding:0"><b>{point.y} %</b></td></tr>',
          footerFormat: '</table>',
          shared: true,
          useHTML: true
        },
        plotOptions: {
          column: {
            pointPadding: 0.2,
            borderWidth: 0
          }
        },
        series: seriesData
      });
      
    }

  </script>
</head>
<body class="easyui-layout" options="border:false">
<div data-options="region:'north',height:60,border:false" style="padding-left:10px;padding-right: 10px;padding-top: 5px;">
  <div class="xinxichaxunkuangz1">
    <div class="dashujtiaojianxuanxiangkuan">
      <div class="dashujtiaojianxuanxiangkuan_lie">
        <div class="tiaojian_key">开始时间：</div>
        <div class="tiaojian_values" style="width:1000px">
          <ul class="tiaojian_values_limian">
            <li>
              <span id="startTimeDiv" class="textbox combo" style="height: 20px">
                <input id="startTime" type="text" name="startTime"  class="easyui-datetimebox shurukuangkais" style='width: 140px;height: 20px'/>
              </span>
            </li>
            <li><span class="buchongdbiaotdsw">结束时间：</span>
              <span id="endTimeDiv" class="textbox combo" style="height: 20px">
                <input id="endTime" type="text" name="endTime"  class="easyui-datetimebox shurukuangkais" style='width: 140px;height: 20px' />
              </span>
            </li>
          </ul>
        </div>
      </div>
      <div class="chaxunchongzhianniu">
        <a href="javascript:initTable()" class="sousuocx">查询</a>
      </div>
    </div>
  </div>
</div>
<div data-options="region:'center',border:false" style="padding-left:10px;padding-right: 10px;overflow-y:auto" >
  <div class="easyui-layout xinxichaxunkuangz2" data-options="fit:true,border:false" > 
    <div id="picDiv"  >
      <div id="container" style="width: 100%;height: 400px"></div>
      <div id="container1" style="margin: 0 auto;width: 80%;height: 300px;display: none;">
        <div id="picDiv1" style="float: left;width: 40%;height: 300px;"></div>
        <div id="picDiv2" style="float: right;width: 40%;height: 300px;">
          <i id="picName" style="text-align: center"></i>
          <div id="picDiv2_1" style="height: 49%;"></div>
          <div id="picDiv2_2" style="height: 49%;"></div>
        </div>
      </div>
    </div>
    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="dashujutable1" style="margin:12px 0 86px 0;padding: 0 20px; " id="TableData">
	      <tbody>
	      </tbody>
	</table>
  </div>
</div>



<!-- 表格导出 -->
<div style="display: none;">
  <form id="exportFrom" name="exportFrom" action="${ctx}/export/export_bklx.htm" method="post" style="visibility: hidden; display: none;">
    <input id="page" name="page" type="hidden">
    <input id="pageSize" name="pageSize" type="hidden">
    <input id="exp_startTime" name="exp_startTime" type="hidden" >
    <input id="exp_endTime" name="exp_endTime" type="hidden" >
    <input id="exp_bkr" name="exp_bkr" type="hidden" >
    <input id="exp_flage" name="exp_flage" type="hidden" >
  </form>
</div>
<!-- 表格导出 -->
</body>
</html>